<script lang="ts" setup>
import {
  Delete,
  ArrowRightBold,
  Plus,
  Edit,
  ArrowDownBold
} from "@element-plus/icons-vue";
import { ref, h, onMounted } from "vue";
import selTable from "./selTable.vue";
import { addDialog } from "@/components/ReDialog";
import { getTableFields, getAppFunList } from "@/api/application";
import functionList from "./functionList.vue";

import type { ModeConfig } from "../utils/types";
const selTableForm = ref();
const roleRef = ref();
const funList = ref();

const currRole = ref({
  id: 0,
  modelID: 0,
  roleID: 0,
  filterField: [],
  pcShowField: [],
  phoneShowFiled: [],
  dataRole: "",
  importField: [],
  hideFieds: [],
  disableFields: [],
  buttonRole: [],
  addTime: "2021-8-9"
});
const prop = withDefaults(defineProps<ModeConfig>(), {
  modaInfo: {
    id: 0,
    appID: 0,
    showTable: "",
    editTable: "",
    modeType: "",
    assField: "",
    showType: "",
    addTime: ""
  },
  roleConfig: [
    {
      id: 0,
      modeID: 0,
      roleID: 0,
      filterField: [],
      menuRole: "",
      pcShowField: [],
      phoneShowFiled: [],
      dataRole: "",
      importField: [],
      buttonRole: [],
      hideFieds: [],
      disableFields: [],
      editCode: 0,
      addTime: "2021-8-9"
    }
  ],
  userRoel: [],
  //showFieldList: [],
  appLink: ""
});

const emit = defineEmits(["delModel"]);

const subDelModel = id => {
  emit("delModel", id);
};

const modaInfo = ref(prop.modaInfo);
const roles = ref(prop.userRoel);
const roleConfg = ref(prop.roleConfig);
const appLink = ref(prop.appLink);
const isProxy = ref(false);
//const showFieldList = ref(prop.showFieldList);
const showFields = ref();
const editFieds = ref();
const selAppRoles = key => {
  roleConfg.value.find(v => {
    if (v.roleID == key) {
      currRole.value = v;
    }
  });
};

const getFunList = async () => {
  const funRes = await getAppFunList({ modelID: modaInfo.value.id, falg: 1 });

  funList.value = funRes.result;
  //console.log(funList.value);
};

onMounted(async () => {
  const Result = await getTableFields({ tableName: modaInfo.value.showTable });
  if (appLink.value == "/proxyList/index") {
    isProxy.value = true;
  }
  showFields.value = Result.result;

  const RS = await getTableFields({ tableName: modaInfo.value.editTable });
  editFieds.value = RS.result;

  // console.log(editFieds, "editFieds");

  getFunList();

  roleRef.value = roleConfg.value[0].roleID;
  roleConfg.value.find(v => {
    if (v.roleID == roleRef.value) {
      currRole.value = v;
    }
  });
});

//选择元表
const addTable = row => {
  addDialog({
    title: `元表选择`,
    width: "1100",
    draggable: true,
    fullscreenIcon: true,
    closeOnClickModal: true,
    center: true,
    alignCenter: true,
    footerRenderer: () => h({}, {}),
    contentRenderer: () => h(selTable, { ref: selTableForm }),
    closeCallBack: async () => {
      const tableRow = selTableForm.value.tableRow;
      if (row == 1) {
        modaInfo.value.showTable = tableRow.tableName;
        const Result = await getTableFields({ tableName: tableRow.tableName });
        showFields.value = Result.result;
      } else {
        const Result = await getTableFields({ tableName: tableRow.tableName });
        editFieds.value = Result.result;
        modaInfo.value.editTable = tableRow.tableName;
      }
    }
  });
};
const show = ref(true);
const state = ref(true);
const funForm = ref();
//显示功能设计界面
const showPanel = () => {
  show.value = !show.value;
  state.value = !state.value;
  console.log("文件禁用" + currRole.value);
};
//打开功能设计界面
const funManger = modeID => {
  addDialog({
    title: `功能设计`,
    width: "50%",
    draggable: true,
    fullscreenIcon: true,
    closeOnClickModal: false,
    center: true,
    alignCenter: true,
    props: {
      id: modeID
    },
    footerButtons: [
      {
        label: "添加功能",
        type: "primary",
        btnClick: () => {
          const dd = funForm.value;
          dd.addNewFunction();
        }
      },
      {
        label: "退出设计",
        type: "success",
        btnClick: () => {}
      }
    ],
    contentRenderer: () => h(functionList, { ref: funForm }),
    closeCallBack: () => {
      getFunList();
      //const dd = ruleFormRef.value.getRef();
      //const curData = options.props.formInline as FormItemProps;
      //if (curData.tableIsFaBu == 0) {
      //row.tableIsFaBu = 0;
      //}
      //console.log(curData, "dd");
      //console.log(curData, "curData");
    }
  });
};
</script>

<template>
  <div class="modeBG">
    <span class="title">{{ modaInfo.showTable }} - {{ modaInfo.id }}</span>

    <el-popconfirm
      :title="`是否确认删除该模块`"
      @confirm="subDelModel(modaInfo.id)"
    >
      <template #reference>
        <el-button type="danger" :icon="Delete" circle />
      </template>
    </el-popconfirm>

    <el-button
      type="success"
      :icon="state ? ArrowDownBold : ArrowRightBold"
      circle
      @click="showPanel"
    />
  </div>
  <div v-if="show">
    <div style="padding-top: 20px">
      <el-form>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="显示表单">
              <el-input
                v-model="modaInfo.showTable"
                placeholder="请选择显示表单"
                class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Plus" @click="addTable(1)" />
                </template>
              </el-input> </el-form-item
          ></el-col>

          <el-col :span="8">
            <el-form-item label="编辑表单">
              <el-input
                placeholder="请选择编辑表单"
                class="input-with-select"
                v-model="modaInfo.editTable"
              >
                <template #append>
                  <el-button :icon="Plus" @click="addTable(2)" />
                </template>
              </el-input> </el-form-item></el-col
        ></el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="子模ID">
              <!--
              <el-select
                placeholder="请选择模块类型"
                v-model="modaInfo.modeType"
              >
                <el-option label="默认" value="默认" />
                <el-option label="父模块" value="父模块" />
                <el-option label="子模块" value="子模块" />
              </el-select>
              -->
              <el-input
                type="text"
                v-model="modaInfo.modeType"
                placeholder="默认"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="关联字段">
              <el-select
                placeholder="请选择关联字段"
                v-model="modaInfo.assField"
              >
                <el-option
                  :label="showV.label"
                  :value="showV.label"
                  v-for="showV in showFields"
                  :key="showV.value"
                /> </el-select
            ></el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <el-divider />
      <el-form label-width="120px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="请选择角色">
              <el-select
                placeholder="请选择使用角色"
                @change="selAppRoles"
                v-model="roleRef"
                :default-first-option="true"
              >
                <el-option
                  :label="vRole.label"
                  :value="vRole.value"
                  v-for="vRole in roles"
                  :key="vRole.value"
                />
              </el-select> </el-form-item
          ></el-col>

          <el-col :span="12">
            <el-form-item label="筛选设置">
              <el-select
                placeholder="请选择筛选字段"
                multiple
                collapse-tags
                collapse-tags-tooltip
                :max-collapse-tags="10"
                filterable
                style="width: 100%"
                v-model="currRole.filterField"
              >
                <el-option
                  :label="showV.label"
                  :value="showV.label"
                  v-for="showV in showFields"
                  :key="showV"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="电脑端显示">
              <el-select
                placeholder="请选择电脑端显示字段"
                multiple
                collapse-tags
                collapse-tags-tooltip
                :max-collapse-tags="50"
                filterable
                v-model="currRole.pcShowField"
                style="width: 100%"
              >
                <el-option
                  :label="showV.label"
                  :value="showV.label"
                  v-for="showV in showFields"
                  :key="showV"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="移动端显示">
              <el-select
                placeholder="请选择移动端显示字段"
                multiple
                collapse-tags
                collapse-tags-tooltip
                :max-collapse-tags="10"
                filterable
                v-model="currRole.phoneShowFiled"
                style="width: 100%"
              >
                <el-option
                  :label="showV.label"
                  :value="showV.label"
                  v-for="showV in showFields"
                  :key="showV"
                /> </el-select
            ></el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <!--
          <el-col :span="8">
            <el-form-item label="行权模板">
              <el-select
                placeholder="请选择数据行权限模板"
                multiple
                collapse-tags
                collapse-tags-tooltip
                :max-collapse-tags="50"
                filterable
                style="width: 100%"
              >
                <el-option label="管理员" value="默认" />
                <el-option label="普通用户" value="父模块" />
                <el-option label="教师" value="子模块" />
              </el-select>
            </el-form-item>
          </el-col>-->
          <el-col :span="12">
            <el-form-item label="行权编辑">
              <el-input
                v-model="currRole.dataRole"
                type="textarea"
                placeholder="可使用行权模板，对列表数据行的读取权限进行设置。"
            /></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审编代码">
              <el-input
                v-model="currRole.editCode"
                type="text"
                placeholder="审核功能勾选时不能为空"
            /></el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="导出数据字段">
              <el-select
                placeholder="请选择导出数据字段"
                multiple
                collapse-tags
                collapse-tags-tooltip
                :max-collapse-tags="50"
                filterable
                style="width: 100%"
                v-model="currRole.importField"
              >
                <el-option
                  :label="showV.label"
                  :value="showV.label"
                  v-for="showV in showFields"
                  :key="showV"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="表单隐藏字段">
              <el-select
                placeholder="请选择隐藏字段"
                multiple
                collapse-tags
                collapse-tags-tooltip
                :max-collapse-tags="50"
                filterable
                style="width: 100%"
                v-model="currRole.hideFieds"
              >
                <el-option
                  :label="showV.label"
                  :value="showV.label"
                  v-for="showV in editFieds"
                  :key="showV.value"
                />
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="表单禁用字段">
              <el-select
                placeholder="请选择禁用字符"
                multiple
                collapse-tags
                collapse-tags-tooltip
                :max-collapse-tags="50"
                filterable
                style="width: 100%"
                v-model="currRole.disableFields"
              >
                <el-option
                  :label="showV.label"
                  :value="showV.label"
                  v-for="showV in editFieds"
                  :key="showV.value"
                />
              </el-select> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="21">
            <el-form-item label="功能设置">
              <el-checkbox-group v-model="currRole.buttonRole">
                <!--
                <el-checkbox label="查询" name="buttonRole" /> 
                <el-checkbox label="添加" name="buttonRole" />
                <el-checkbox label="删除" name="buttonRole" />
                <el-checkbox label="修改" name="buttonRole" />
                <el-checkbox label="导入" name="buttonRole" />
                <el-checkbox label="导出" name="buttonRole" />
                <el-checkbox label="特殊导入" name="buttonRole" />
-->
                <el-checkbox
                  :label="funItem.id"
                  name="buttonRole"
                  v-for="funItem in funList"
                  :key="funItem"
                >
                  {{ funItem.funName }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>

          <el-col :span="2">
            <el-button
              :icon="Edit"
              @click="funManger(modaInfo.id)"
              type="default"
              >编辑功能</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<style scoped>
.modeBG {
  padding: 5px;
  margin-bottom: 5px;
  text-align: right;
  background: #e1e1e1;
}

.delICO {
  font-size: 15px;
}

.title {
  float: left;
  padding: 10px 10px 0;
  color: #2691ff;
}
</style>
